<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-3.3.1.min.js"></script>
<title>Insert title here</title>
</head>
<body>
	<div align="center">
		<h2>菜单树形显示查询结果</h2>
		<form name="f">
			<table>
				<tr>
					<td><input type="hidden" name="menuName"></td>
				</tr>
				<tr>
					<td align="center" colspan="2"><input type="hidden" value="查询" onclick="query()"></td>
				</tr>
			</table>
		</form>
	</div>
	<hr>
	<div id="showTable"></div><!-- 用来显示查询的结果 -->
	<div id="upd"></div><!-- 用来显示修改界面 -->
</body>
<script type="text/javascript">
	query();
	function query(){
		var menuName = f.menuName.value;
		$.ajax({
			type:"post",//设置提交方式
			url:"${pageContext.request.contextPath}/servlet/MenuQueryServlet",
			async:true,//表示进行异步执行
			dataType:"json",//数据的返回类型
			data:{menuName : menuName},
			success:function(data){//data就是成功之后 Servlet返回的结果
				var str = "";
				for(var i = 0;i<data.length;i++){
					if((data[i].menuLevel).length == 3){
						str += "<div id='flip1' onclick='findMenu("+data[i].menuLevel+")'>"+data[i].menuName+"</div>";
						str += "<div id='"+data[i].menuLevel+"' ></div>";
					}
					
				}
			$("#showTable").html(str);
			},
			error:function(err){
				alert("操作失败");
			}
		});
	}
	function findMenu(menuLevel){
		var level = "00"+menuLevel;
		$.ajax({
			type:"post",//设置提交方式
			url:"${pageContext.request.contextPath}/servlet/MenuNextQueryServlet",
			async:true,//表示进行异步执行
			dataType:"json",//数据的返回类型
			data:{menuLevel : menuLevel},
			success:function(data){//data就是成功之后 Servlet返回的结果
				var str = "";
				for(var i = 0;i<data.length;i++){
						str += "<div>--"+data[i].menuName+"<a style='margin-left: 60px'>状态："+data[i].menuState+"</a><a style='margin-left: 120px' href='#' onclick='doDel("+data[i].menuId+")' >停用</a></div>";
				}
				$("#"+level).html(str);
			},
			error:function(err){
				alert("操作失败");
			}
		});
		$("#"+level).slideToggle("slow");
	}
	function doDel(menuId){
		if(confirm("确认停用？")){
			$.ajax({
				type:"post",//设置提交方式
				url:"${pageContext.request.contextPath}/servlet/MenuDelServlet",
				async:true,//表示进行异步执行
				dataType:"json",//数据的返回类型
				data:{menuId : menuId},
				success:function(data){//data就是成功之后 Servlet返回的结果
					if(data[0].result){
						alert("停用成功！");
						query(0);
					}else{
						alert("停用失败");
					}
				},
				error:function(err){
					alert("操作失败");
				}
			});
		}
	}
</script>
</html>